<template>
  <div class="changePayPassword">
    <!--导航栏-->
    <van-nav-bar title="修改支付密码" left-arrow @click-left="$router.go(-1)"/>

    <!--logo-->
    <div class="logo_container">
      <p class="logo_container_out">
        <i class="fa fa-unlock-alt"></i>
      </p>
    </div>

    <!--提示-->
    <p class="hint">请确认，是否修改密码</p>

    <p class="prompt">请输入原密码</p>
    <van-password-input :value="oldPayPassword" info="密码为 6 位数字" :focused="showKeyboard"
                        @focus="showKeyboard = true;showKeyboard1=false"/>
    <!-- 数字键盘 -->
    <van-number-keyboard :show="showKeyboard" @input="oldInput" @delete="oldDelete" @blur="checkPayPassword"/>

    <div v-if="flag">
      <p class="prompt">请输入新密码</p>
      <van-password-input :value="newPayPassword" info="密码为 6 位数字" :focused="showKeyboard1"
                          @focus="showKeyboard1 = true;showKeyboard=false"/>
      <!-- 数字键盘 -->
      <van-number-keyboard :show="showKeyboard1" @input="newInput" @delete="newDelete" @blur="showKeyboard1 = false"/>
    </div>

    <!-- 保存按钮-->
    <div class="Complete_button">
      <van-button text="保存" type="primary" block round @click="submitData" class="btn"/>
    </div>

  </div>
</template>

<script>
export default {
  name: "changePayPassword",
  inject: ["reload"],

  data() {
    return {
      oldPayPassword: "",
      flag: false,
      newPayPassword: "",
      showKeyboard: false,
      showKeyboard1: false,
    };
  },

  methods: {
    //验证支付密码是否正确
    async checkPayPassword() {
      this.showKeyboard = false;
      if (this.oldPayPassword.length < 6) {
        this.$toast("密码长度不能小于6位");
        return;
      }

      let userId = this.$store.getters.user.userId;
      //发送请求验证支付密码是否正确
      let validResult = await this.$axios.post(this.$api.validPayPwd, {
        userId: userId,
        payPwdValue: this.oldPayPassword
      });
      //验证密码通过
      if (validResult.status === 200 && validResult.data.code === 200) {
        // 显示新改框
        this.flag = true;
      } else {
        this.oldPayPassword = "";
        this.$toast(validResult.data.message);
      }
    },
    // 原密码输入和删除
    oldInput(key) {
      this.oldPayPassword = (this.oldPayPassword + key).slice(0, 6);
      if (this.oldPayPassword.length >= 6) {
        this.showKeyboard = false;
        this.checkPayPassword();
      }
    },
    oldDelete() {
      this.oldPayPassword = this.oldPayPassword.slice(0, this.oldPayPassword.length - 1);
    },

    // 原密码输入和删除
    newInput(key) {
      this.newPayPassword = (this.newPayPassword + key).slice(0, 6);
      if (this.newPayPassword.length >= 6) {
        this.showKeyboard1 = false;
      }
    },
    newDelete() {
      this.newPayPassword = this.newPayPassword.slice(0, this.newPayPassword.length - 1);
    },

    // 提交数据
    async submitData() {
      // 验证长度
      if (this.newPayPassword.length < 6) {
        this.$toast("新密码不能小于6位");
        return;
      }
      //验证两次密码是否一致
      if (this.oldPayPassword === this.newPayPassword) {
        this.$toast("新密码与原密码相同，请更换");
        return;
      }

      let res = await this.$axios.post(this.$api.setPayPwd, {
        userId: this.$store.getters.user.userId, payPwdValue: this.newPayPassword
      });
      if (res.status === 200 && res.data.code === 200) {
        this.$toast("修改成功");
        // 跳转到安全设置页面
        this.$router.push("/safe");
      } else {
        this.$toast(res.data.message);
      }
    }
  },
}
</script>

<style scoped lang="less">
.changePayPassword {

  .van-password-input__security li {
    border: 1px #333333 solid;
  }

  .logo_container {
    margin-top: 1rem;
    text-align: center;

    .logo_container_out {
      margin: 0;
      display: inline-block;
      width: 4rem;
      height: 4rem;
      background-color: #77D16D;
      text-align: center;
      border-radius: 50%;

      i {
        margin-top: 0.75rem;
        color: white;
        font-size: 2.5rem;
      }
    }
  }

  .hint {
    padding: .2rem;
    font-size: .8rem;
    text-align: center;
  }

  .prompt {
    color: #A6A6A6;
    font-size: .7rem;
    padding-left: 1rem;
  }

  .Complete_button {
    margin-top: 5rem;

    .btn {
      margin-left: 6%;
      width: 88%;
      border: none;
      background: -webkit-linear-gradient(left top, #c6fb95, #20a1ff); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(bottom right, #c6fb95, #20a1ff); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(bottom right, #c6fb95, #20a1ff); /* Firefox 3.6 - 15 */
      background: linear-gradient(to bottom right, #c6fb95, #20a1ff); /* 标准的语法 */
    }

  }

}
</style>